<template>
  <div>
    <!-- <select :value="value" @change="$emit('change', $event.target.value)">
        <option v-for="digit in base.value" :key="digit.id" :value="digit">{{string[digit]}}</option>
    </select>-->
    <form>
      <div>
        <label class="badge badge-secondary label">{{id+1}}</label>
        <label>{{base.text}}</label>
      </div>
      <label class="radio-inline content-radios" v-for="digit in base.value" :key="digit.id">
        <input
          type="radio"
          name="optradio"
          :value="digit"
          :checked="value==digit"
          @click="$emit('change', $event.target.value)"
        />
        {{string[digit]}}
      </label>
    </form>
    <br />
  </div>
</template>

<script>
export default {
  name: "ValueView",
  props: ["base", "id", "value"],
  data() {
    return { checkedValue: "" };
  },
  watch: {
    checkedValue: function() {
      this.$emit("change", this.checkedValue);
    }
  },
  computed: {
    string() {
      if (this.base.value.length == 2) {
        return ["否", "是"];
      } else {
        return this.base.value;
      }
    }
  },
  model: {
    prop: "value",
    event: "change"
  }
};
</script>

<style scoped>
.label {
  margin: 0 0.5em;
}
select {
  border: 1px solid lightgrey;
  border-radius: 10px;
}
.content-radios{
  padding-right: 0.6em;
}
</style>